<template>
	<view class="c_container">
		<view class="time-box">
			<view class="date_change" style="padding: 32rpx;" @click="showDate = true">
				<slot>{{dateValue.textCN}}</slot>
				<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image>
			</view>
			<view class="l_c_top">
				<text :class="threeOff==1?'scroll_check':'scroll_title'" @click="allCount">全部</text>
				<text :class="threeOff==2?'scroll_check':'scroll_title'" @click="enterCount">入账</text>
				<text :class="threeOff==3?'scroll_check':'scroll_title'" @click="outCount">支出</text>
			</view>
		</view>
		<view class="list_container">
			<view class="list_c_box">
				<view>
					<view class="txtCon" v-if="recodeList.length == 0">
						<noContent></noContent>
					</view>
					<view v-else>
						<scroll-view scroll-y="true" :style="{height: height}" class="scroll-Y"
							@scrolltoupper="upper" @scrolltolower="lower" refresher-enabled="true"
							:refresher-triggered="triggered" :refresher-threshold="70" @scroll="scroll"
							@refresherrefresh="onRefresh">

							<view class="l_item_box" v-for="(item, index) in recodeList" :key="index">
								<view class="l_i_b_box">
									<view class="l_ite_top">
										<text class="s_type">{{item.opp_acct_name}}</text>
										<text class="scroll_time">{{item.strDate}}</text>
									</view>
									<view class="l_ite_top">
										<text
											v-if="item.dc_flag==='C'">+{{getCheckNum(item.voucher_cams)}}</text>
										<text v-else>-{{getCheckNum(item.voucher_cams)}}</text>
									</view>
								</view>
							</view>
							<view class="item_f_box">
								<text class="scroll_time">{{canLoad?'数据加载中...':'没有更多数据啦'}}~</text>
							</view>
						</scroll-view>
					</view>

				</view>
			</view>
		</view>
		<custom-year-month-selector-plus v-model="showDate" @change="cusChange" />
	</view>
</template>

<script>
	import {
		getPhoneCode,
		getTwoUserList,
		getMoneny,
		idCardOCR,
		quickPaymentSendCode,
		quickPaymentSuccess,
		transactionDetail
	} from '../../common/api/blank.js';
	import {
		queryEmpwalletDetail,
		queryEmpwalletDetailAndCount
	} from '../../common/api/index.js';
	import {
		dateFtt,
		mGetDate,
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	import noContent from '../../components/no-content.vue'
	import customYearMonthSelectorPlus from '@/components/custom-year-month-selector/custom-year-month-selector-plus'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		onLoad: function(option) {
			this.orgId = parseInt(option.orgId)
			this.batId = option.batId
			let text = this.getDate()
			let value = text.split('-');
			let textCN = value[0] + '年' + value[1] + '月'
			this.dateValue = {
				value,
				text,
				textCN,
				sAndeforTime: [dateFtt('yyyy-MM-dd', value[0] + '-' + value[1] + '-01') + ' 00:00:00',
					dateFtt(
						'yyyy-MM-dd', value[0] + '-' + value[1] + '-' + mGetDate(value[0],
							value[1])) +
					' 23:59:59'
				],
			}
		},
		onShow() {
			let _that = this;
			uni.getSystemInfo({
				success: function(res) {
					_that.height = res.windowHeight - 95 + 'px';
				}
			})
			_that.allCount()
		},
		components: {
			noContent,
			customYearMonthSelectorPlus,
			tmcModal
		},
		computed: {
			getCheckNum(amount) {
				return function(amount) {
					return Number(amount).toFixed(2);
				}
			}
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				threeOff: 1,
				batId: "",
				showDate: false,
				date: '',
				date1: '',
				billMouth: '',
				recodeList: [],
				height: 0,
				incomeAmount: 0,
				disburseAmount: 0,
				balance: 0,
				now: currentDate,
				dateValue: {},
				content1: '',
				title1: '',
				showMcModal1: false,
				triggered: false,
				currentPage: 1,
				canLoad: true,
				endNum: 0, //首次为0
				inqBegIndRec: "", //首次访问时为空
				endFlag: 0, //第一次请求默认为0
				startRow: 1, //开始请求第一行
				endRow: 10, //结束行
				isRequest: true, //是否在请求
			}
		},
		methods: {
			//全部
			allCount() {
				if (!this.isRequest) {
					return
				}
				this.threeOff = 1
				this.recodeList = []
				this.inqBegIndRec = ""
				this.canLoad = true
				this.startRow = 1
				this.endFlag = 0
				this.endRow = 10
				this.getPayList("", 1)
			},
			//入账
			enterCount() {
				if (!this.isRequest) {
					return
				}
				this.threeOff = 2
				this.recodeList = []
				this.inqBegIndRec = ""
				this.canLoad = true
				this.startRow = 1
				this.endFlag = 0
				this.endRow = 10
				this.getPayList("C", 1)
			},
			//支出
			outCount() {
				if (!this.isRequest) {
					return
				}
				this.threeOff = 3
				this.recodeList = []
				this.inqBegIndRec = ""
				this.canLoad = true
				this.startRow = 1
				this.endFlag = 0
				this.endRow = 10
				this.getPayList("D", 1)
			},
			getPayList(val_Flag, val_First) { //val_First控制是否是首次请求,1首次,0是n次,val_Flag控制收入"C"与支出"D"区分，val_Type控制table切换
				this.isRequest = false
				var star = this.dateValue.sAndeforTime[0]
				var end = this.dateValue.sAndeforTime[1]
				var p1 = new Date(end).getTime()
				var p2 = new Date().getTime()
				if (p1 > p2) {
					end = this.timestampToTime(p2)
				}
				var inquiryStartTime = star.split(" ")[0].replace(/-/g, "")
				var inquiryEndTime = end.split(" ")[0].replace(/-/g, "")
				var beginTime = star.split(" ")[1].replace(/:/g, "")
				var endTime = end.split(" ")[1].replace(/:/g, "")
				transactionDetail({
					batId: this.batId,
					dcFlag: val_Flag,
					inquiryStartTime,
					inquiryEndTime,
					beginTime,
					endTime:"235959",
					isFirstRequest: val_First,
					startRow: this.startRow,
					endRow: this.endRow,
					inqBegIndRec: val_First == 1 ? '' : this.inqBegIndRec,
					endFlag: this.endFlag,
					remark: "",
					orgId: this.orgId
				}).then((res) => {
					console.log(res)
					if (res.code === 0) {
						if (res.data.responseData) {
							if (res.data.endFlag == 3) {
								this.canLoad = false
							} else {
								this.canLoad = true
							}
							this.endFlag = res.data.endFlag
							this.inqBegIndRec = res.data.inqBegIndRec
							this.recodeList = this.recodeList.concat(res.data.responseData)
							this.recodeList.forEach((item, index) => {
								item.strDate = item.transaction_date.slice(0, 4) +
									"-" + item
									.transaction_date.slice(4, 6) + "-" + item
									.transaction_date.slice(6,
										8) + " " + item.transaction_time.slice(0,
										2) + ":" + item
									.transaction_time.slice(2, 4) + ":" + item
									.transaction_time.slice(4, 6)
							})
						} else {
							this.recodeList = this.recodeList.concat([])
						}
					} else {
						_showToast(res.msg)
					}
					this.isRequest = true
				}).catch((error) => {
					this.isRequest = true
				})
			},
			showTxt(title, content) {
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
			},
			cusChange(dateValue) {
				this.threeOff = 1
				this.dateValue = dateValue
				this.allCount()
			},
			chooseDate() {
				uni.navigateTo({
					url: '../datepicker/datepicker?date=' + this.now
				});
			},
			onRefresh() {
				this.threeOff = 1
				this.allCount()
			},
			upper: function(e) {},
			lower: function(e) {
				if (this.threeOff == 1) {
					if (!this.canLoad) return
					this.startRow = this.endRow - 0 + 1
					this.endRow = this.startRow + 9
					this.getPayList("", 0)
				} else if (this.threeOff == 2) {
					if (!this.canLoad) return
					this.startRow = this.endRow - 0 + 1
					this.endRow = this.startRow + 9
					this.getPayList("C", 0)
				} else if (this.threeOff == 3) {
					if (!this.canLoad) return
					this.startRow = this.endRow - 0 + 1
					this.endRow = this.startRow + 9
					this.getPayList("D", 0)
				} else {
					uni.showToast({
						icon: 'none',
						title: "渲染错误"
					})
				}
			},
			scroll: function(e) {
				// console.log(e)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + "-";
				var M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "-";
				var D =
					date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
				var h =
					date.getHours() < 10 ? "0" + date.getHours() + ":" : date.getHours() + ":";
				var m =
					date.getMinutes() < 10 ?
					"0" + date.getMinutes() + ":" :
					date.getMinutes() + ":";
				var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}

	.c_container {
		height: 100vh;
		overflow: hidden;
	}

	.time-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		line-height: 60rpx;
	}

	.date_change {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		font-weight: 800;
		color: #3C424F;
		line-height: 42rpx;
	}

	.down_icon {
		width: 48rpx;
		height: 48rpx;
	}

	.s_time {
		color: #fff;
		background: rgb(118, 118, 119);
		margin-right: 20rpx;
		padding: 5prx 20rpx;
		display: block;
		width: 100px;
		text-align: center;
	}

	.list_container {
		padding: 10rpx;
		background-color: #FFF;
	}

	.list_c_box {
		padding: 10rpx;
	}

	.l_c_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #F6F6F6;
		padding: 0 30rpx;
	}

	.l_item_box {
		display: flex;
		lex-direction: row;
		align-items: center;
	}

	.s_title {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #3C424F;
	}

	.l_i_box_img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.l_i_b_box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		border-bottom: 1px solid #dddddd;
		margin-top: 20rpx;
		padding: 10rpx;
	}

	.l_ite_top {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		line-height: 50rpx;
	}

	.item_f_box {
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.scroll_title {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 500;
		font-size: 28rpx;
		color: #6B707A;
	}

	.scroll_check {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 500;
		font-size: 28rpx;
		color: #3F9BFB;
	}

	.s_type {
		font-size: $font-size-base;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}

	.txtCon {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}

	.no-content {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #999999;
	}

	.jiaMoney {
		font-size: 40rpx;
		font-family: "PingFangSC-Semibold, PingFang SC";
		font-weight: 600;
		color: #FA6400;
	}

	.jianMoney {
		font-size: 40rpx;
		font-family: "PingFangSC-Semibold, PingFang SC";
		font-weight: 600;
		color: #3C424F;
	}

	.scroll_time {
		font-size: 24rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}
</style>